@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    *,
    ::after,
    ::before {
        box-sizing: border-box;
        border-style: solid;
        border-width: 0;
    }

    html {
        font-variation-settings: normal;
        line-height: 1.15;
        text-size-adjust: 100%;
        font-synthesis-weight: none;
        scroll-behavior: smooth;
        text-rendering: optimizelegibility;
        -webkit-tap-highlight-color: transparent;
    }

    #app,
    body,
    html {
        @apply size-full;
        /* scrollbar-gutter: stable; */
    }

    body {
        min-height: 100vh;
    }

    a,
    a:active,
    a:hover,
    a:link,
    a:visited {
        @apply no-underline;
    }

    input::placeholder,
    textarea::placeholder {
        @apply opacity-100;
    }

}

html.invert-mode {
    @apply invert;
}

html.grayscale-mode {
    @apply grayscale;
}
